<script setup lang='ts'>
  import { nextTick, reactive, ref } from 'vue';
  import { gamesApi } from '@/api/controller';
  import { taskSendType } from '@/pinia/getter';
  import { ToastSuccess, ToastWarning, Toastloading, allNumber } from '@/utils/public';
  import serachGoods from '@/components/serachGoods/index.vue';
  import serachGift from '@/components/serachGift/index.vue';
  const formLabelWidth = '120px'
  const dataForm = ref()
  const $emit = defineEmits(['updateList'])
  const action = reactive({
    dialogFormVisible:false,
    disabled:false,
    kk_balance:'',
    title:'',
    taskType:[] as Array<any>
  })
  interface formQuert {
    id:number
    task_id:number
    type:number
    need_value:number
    award_type:number
    award_num:number
    award_id:number
    is_day:number
    award_name:string
    desc:string
  }
  let form = reactive({} as formQuert)
  const formRules = {
    type: [{ required: true, message: "请选择任务类型", trigger: "blur" }],
    need_value: [{ required: true, message: "请输入任务门槛", trigger: "blur" }],
    award_type: [{ required: true, message: "请选择奖励类型", trigger: "blur" }],
    award_name: [{ required: true, message: "请输入奖励名称", trigger: "blur" }],
    award_num: [{ required: true, message: "请输入奖励数量", trigger: "blur" }],
    desc: [{ required: true, message: "请输入任务描述", trigger: "blur" }],
    award_id: [{ required: true, message: "请输入奖励ID", trigger: "blur" }],
  }
  const handleSubmit = ()=>{
    dataForm.value.validate(async(valid:any)=>{
      if(!valid) return
      const loading = Toastloading()
      let submitSet = false
      const { task_id } = form
      if(task_id) {
        await gamesApi.edit_day_task(form).then(()=>{
          ToastSuccess('编辑成功')
          submitSet = true
        }).catch(()=>{
          loading.close()
        })
      }
      else {
        await gamesApi.add_day_task(form).then(()=>{
          ToastSuccess('新增成功')
          submitSet = true
        }).catch(()=>{
          loading.close()
        })
      }
      if(submitSet) {
        loading.close()
        $emit('updateList')
        closeDialog()
      }
    })
  }
  const openDialog = (query:any = {})=> {
    const {
      activityID='', task_id, type, need_value, award_type,
      award_num, award_id, is_day, award_name, taskType=[],
      desc,
    } = query
    if(!activityID) return ToastWarning('缺少 activityID')
    const obj = {
      award_id, type, need_value, award_type, award_num, award_name, is_day, desc
    } as any
    if(task_id) {
      obj['task_id'] = task_id
    }
    else {
      obj['id'] = activityID
    }
    action.taskType = taskType
    Object.assign(form,obj)
    action.title = task_id?'编辑任务':'创建任务'
    action.dialogFormVisible = true
  }
  const closeDialog = ()=>{
    form = reactive({} as formQuert)
    action.kk_balance = ''
    nextTick(() => {
      dataForm.value.clearValidate();
    });
    action.dialogFormVisible = false
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
      top="10vh"
      class="xm-dialog input-width"
      v-model="action.dialogFormVisible"
      :close-on-click-modal="action.disabled"
      :show-close="action.disabled"
      :close-on-press-escape="action.disabled"
      width="52%"
      :title="action.title">
      <el-form ref="dataForm" :model="form" :rules="formRules">
        <el-form-item :label-width="formLabelWidth" label="任务类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择任务类型">
            <el-option v-for="item in action.taskType" :label="item.label" :value="item.type" />
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="任务门槛" prop="need_value">
          <el-input v-model="form.need_value" @input="allNumber(form,'need_value')" placeholder="请输入任务门槛" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="奖励类型" prop="award_type">
          <el-select v-model="form.award_type" placeholder="请选择奖励类型">
            <el-option v-for="item in taskSendType" :label="item.label" :value="item.type" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.award_type == 3" :label-width="formLabelWidth" label="奖励" prop="award_id">
          <serachGoods v-model:goods_id="form.award_id" />
        </el-form-item>
        <el-form-item v-if="form.award_type == 4" :label-width="formLabelWidth" label="奖励" prop="award_id">
          <serachGift v-model:gift_id="form.award_id" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="奖励名称" prop="award_name">
          <el-input v-model="form.award_name" placeholder="请输入奖励名称" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="奖励数量" prop="award_num">
          <el-input v-model="form.award_num" @input="allNumber(form,'award_num')" placeholder="请输入奖励数量" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="任务描述" prop="desc">
          <el-input
            v-model="form.desc"
            :autosize="{ minRows: 4, maxRows: 4}"
            type="textarea"
            placeholder="请输入任务描述"
          />
        </el-form-item>
      </el-form>
      <template v-if="!action.disabled" #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>